<template>
  <view class="topInfo">
    <image v-if="data.photo" class="topInfo-avatar" :src="data.photo"> </image>
    <image
      v-else
      class="topInfo-avatar"
      src="@/static/images/common/userDefaultAvatar.png"
    ></image>
    <view class="topInfo-right">
      <view class="topInfo-right-row">
        <view class="topInfo-right-row-name text2">
          {{ data.userName }}
        </view>
      </view>
      <view class="topInfo-right-time"> {{ getChatTime(data, true) }}</view>

      <!-- <view class="topInfo-right-bottom"> {{ data.subTitle }}</view> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";
import { getChatTime } from "@/utils/chat";
import { computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});
</script>

<style lang="scss" scoped>
.topInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  &-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
  }
  &-right {
    margin-left: 16rpx;
    width: calc(100% - 96rpx);
    display: flex;
    flex-direction: row;
    &-row {
      width: calc(100% - 240rpx);
      // display: flex;
      // flex-direction: row;
      height: 80rpx;
      &-name {
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;
        line-height: 80rpx;
        letter-spacing: 1px;
      }
      // &-time {
      //   margin-left: auto;
      //   padding-left: 24rpx;
      //   font-size: 26rpx;
      //   color: #666666;
      //   line-height: 32rpx;
      // }
    }
    &-time {
      width: 240rpx;
      margin-left: auto;
      font-size: 26rpx;
      color: #666666;
      text-align: right;
      line-height: 80rpx;
    }
    &-bottom {
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #666666;
      line-height: 28rpx;
    }
  }
  &-top {
    &-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }
  }
  &-content {
    margin-top: 24rpx;
    margin-bottom: 16rpx;
    line-height: 36rpx;
  }
  &-bottom {
    height: 50rpx;
    &-btn {
      margin-left: auto;
    }
  }
}
</style>
